<template>
  <div class="calendar-container">
    <div class="calendar-header">
      <el-button @click="prevYear" size="small">« 年</el-button>
      <el-button @click="prevMonth" size="small">‹ 月</el-button>
      <span class="calendar-title">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
      <el-button @click="nextMonth" size="small">月 ></el-button>
      <el-button @click="nextYear" size="small">年 »</el-button>
    </div>
    <div class="calendar-table">
      <div class="calendar-row calendar-week">
        <div v-for="w in weekDays" :key="w" class="calendar-cell week-cell">{{ w }}</div>
      </div>
      <div v-for="(row, rIdx) in calendarRows" :key="rIdx" class="calendar-row">
        <div
          v-for="(cell, cIdx) in row"
          :key="cIdx"
          class="calendar-cell"
          :class="cell.status"
        >
          <span v-if="cell.day">
            {{ cell.day }}
            <!-- <el-icon v-if="cell.status === 'signed'" color="#67C23A" style="margin-left:2px;">
              <check />
            </el-icon> -->
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed,inject } from 'vue';

// 定义 props 并设置默认值
const props = withDefaults(defineProps<{
  listArray?: Record<string, string>
}>(), {
  listArray: () => ({})
});



const fetchCheckInStatus = inject<(_year: number, _month: number) => void>('fetchCheckInStatus');
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];

// 当前年月
const today = new Date();
const currentYear = ref(today.getFullYear());
const currentMonth = ref(today.getMonth());

// 模拟签到数据：key为日期字符串，value为状态
// 状态：signed 已签到，missed 漏签，unsigned 未签到
// const signData = ref<Record<string, 'signed' | 'missed' | 'unsigned'>>({
//   // 示例：'2025-10-01': 'signed'
// })
// 初始化本月数据
function initSignData(year: number, month: number) {
  fetchCheckInStatus && fetchCheckInStatus(year,month+1);
  
}


// 切换月、年
function prevMonth() {
  if (currentMonth.value === 0) {
    currentMonth.value = 11;
    currentYear.value--;
  } else {
    currentMonth.value--;
  }
  initSignData(currentYear.value, currentMonth.value);
}
function nextMonth() {
  if (currentMonth.value === 11) {
    currentMonth.value = 0;
    currentYear.value++;
  } else {
    currentMonth.value++;
  }
  initSignData(currentYear.value, currentMonth.value);
}
function prevYear() {
  currentYear.value--;
  initSignData(currentYear.value, currentMonth.value);
}
function nextYear() {
  currentYear.value++;
  initSignData(currentYear.value, currentMonth.value);
}

// 生成日历表格
const calendarRows = computed(() => {
  const rows: Array<Array<{ day?: number; status?: string }>> = [];
  const daysInMonth = new Date(currentYear.value, currentMonth.value + 1, 0).getDate();
  const firstDay = new Date(currentYear.value, currentMonth.value, 1).getDay();
  let day = 1;
  for (let i = 0; i < 6; i++) {
    const row: Array<{ day?: number; status?: string }> = [];
    for (let j = 0; j < 7; j++) {
      if ((i === 0 && j < firstDay) || day > daysInMonth) {
        row.push({});
      } else {
        // const key = `${currentYear.value}-${String(currentMonth.value + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
        const key = `${String(day)}`;
        row.push({
          day,
          status: props.listArray?.[key] || ''
        });
        day++;
      }
    }
    rows.push(row);
  }
  return rows;
});
</script>

<style scoped lang="scss">
.calendar-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #eee;
  padding: 16px;
}
.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.calendar-title {
  font-weight: bold;
  font-size: 16px;
  margin: 0 12px;
}
.calendar-table {
  width: 100%;
}
.calendar-row {
  display: flex;
}
.calendar-cell {
  flex: 1;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin: 2px;
  font-size: 15px;
  position: relative;
  background: #f8f8f8;
  transition: background 0.2s;
}
.week-cell {
  background: #f0f0f0;
  font-weight: bold;
}
.signed {
  background: #e1f3d8;
  color: #67C23A;
  font-weight: bold;
}
.unsigned {
  background: #fdf6ec;
  color: #e6a23c;
}
.missed {
  background: #fde2e2;
  color: #f56c6c;
}
</style>